<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个three.js实例</title>
    <script src="three.min.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="MTLLoader.js"></script>
    <script src="OBJMTLLoader.js"></script>

</head>
<body style="margin: 0;padding: 0;">
<!--<audio src="踏古.mp3" autoplay loop></audio>-->
<div id="img" style="position:absolute;width: 100%;height:100%;z-index: 999;padding-top:40%;" hidden><img src="1.jpg" width="100%" height="200px"></div>
<script type="text/javascript">
//位置

var location_x,//经度
	location_y,//维度
	t_alpha=0,
	t_beta=0,
	t_gamma=0,
	t_xA=0,
	t_yA=0,
	t_zA=0;
var time_old=0;
var time_new=0;
	// 扩展API加载完毕后调用onPlusReady回调函数 
	document.addEventListener("plusready", onPlusReady, false);
	// 扩展API加载完毕，现在可以正常调用扩展API
	function onPlusReady() {
	//处理位置坐标
		var watch1=plus.geolocation.watchPosition(function(p) {
			location_x=p.coords.latitude;
			location_y=p.coords.longitude;
		//	console.log("X:"+location_x+"Y:"+location_y);
			//camera.position.x =camera.position.x +5;
//			camera.rotation.set(0.5,0,0);
//		    renderer.render(scene, camera);
//		    requestAnimationFrame(animation);
		}, function(e) {
			alert("Geolocation error: " + e.message);
		});
		//处理水平仪gamma，beta
		//处理指南针alpha
		var watch2=plus.orientation.watchOrientation(function(r) {
		//update(r.alpha, r.beta,r.gamma);
		//console.log("a:"+r.alpha+"b:"+r.beta+"g:"+r.gamma);
		t_alpha=r.alpha;
		t_beta=r.beta;
		t_gamma=r.gamma;
		}, function(e) {
		}, {
			frequency : 100
		});
		
		//处理加速度
		 var watch3= plus.accelerometer.watchAcceleration( function ( a ) {
		 	//console.log("X轴：" + a.xAxis + "\nY轴：" + a.yAxis + "\nZ轴：" + a.zAxis );
			t_xA=a.xAxis;
			t_yA=a.yAxis-6.8;
			t_zA=a.zAxis;
		 }, function ( e ) {
			console.log( "监听失败:" + e.message );
		} );
	}






    var scene=new THREE.Scene();
//添加几何体
    var geometry=new THREE.BoxGeometry(100,100,100);
    var material=new THREE.MeshLambertMaterial({color:0xffffff,
    map:THREE.ImageUtils.loadTexture("1.jpg")
    });
    var mesh=new THREE.Mesh(geometry,material);
    document.addEventListener( 'mousedown', fff, false );
    function fff(){
    	alert("成功获取奖励");
    	document.getElementById("img").style.display="block";
    	
    }
    mesh.position.set(400,200,400);
    scene.add(mesh);
//添加灯光
    var light=new THREE.PointLight(0xffffff);
    light.position.set(0,0,1200);
    scene.add(light);

    var light1=new THREE.PointLight(0xffffff);
    light1.position.set(800,800,1000);
    scene.add(light1);
//添加环境光
    scene.add(new THREE.AmbientLight(0x333333));
//添加相机
    var camera=new THREE.PerspectiveCamera(400,800/600,1,20000);
    camera.position.set(600,600,600);
    camera.lookAt(new THREE.Vector3(800,800,800));
    scene.add(camera);
//添加渲染器
    var renderer=new THREE.WebGLRenderer();
    renderer.setSize(800,600);
    document.body.appendChild(renderer.domElement);
    render();
//添加相机控制器
    var controls=new THREE.OrbitControls(camera);
    controls.addEventListener('change',render);
//渲染函数
    function render(){
        renderer.render(scene,camera);
    }
    function animate() {
        requestAnimationFrame( animate );
        render();

    }
function animation(){
    //renderer.clear();

    time_new=new Date().getTime();
    if(time_old!=0){
    	var t=time_new-time_old;
    	console.log(t)
    	var s_x=t_xA*t*t/200;
    	var s_y=t_yA*t*t/200;
    	var s_z=t_zA*t*t/200;
//  	camera.position.x=camera.position.x+s_x;
//	    camera.position.y=camera.position.x+s_y;
	   // camera.position.y=camera.position.x+s_z;

	    //camera.rotation.set(t_beta/180,t_gamma/180,t_alpha/180);
	    //camera.lookAt(light.position);
    }
    time_old=time_new;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

   // animate();
/*//加载obj
    var loader=new THREE.OBJLoader();
    loader.load("walt/WaltHead.obj",function(waltObject){
      //  waltObject.scale.set(0.1,0.1,0.1);缩放
        waltObject.position.y=50;
        waltObject.position.x=-30;
        scene.add(waltObject);
        render();
    });
//加载obj带材质
    var loader2=new THREE.OBJMTLLoader();
    loader2.load("walt/WaltHead.obj","walt/WaltHead.mtl",function(waltObject){
        //  waltObject.scale.set(0.1,0.1,0.1);
        waltObject.position.y=50;
        waltObject.position.x=30;
        scene.add(waltObject);
        render();
    });
    var loader3=new THREE.OBJMTLLoader();
    loader2.load("max/2.obj","max/2.mtl",function(waltObject){
          waltObject.scale.set(0.05,0.05,0.05);
        waltObject.position.y=200;
        waltObject.position.x=200;
        scene.add(waltObject);
        render();
    });*/

    //添加天空盒
    var path = "tp/";
    var format = '.jpg';
    var urls = [
        path + 'px' + format, path + 'nx' + format,
        path + 'py' + format, path + 'ny' + format,
        path + 'pz' + format, path + 'nz' + format
    ];

    var textureCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeRefractionMapping );
    var shader = THREE.ShaderLib[ "cube" ];
    shader.uniforms[ "tCube" ].value = textureCube;

    var material1 = new THREE.ShaderMaterial( {

                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                depthWrite: false,
                side: THREE.BackSide

            } ),

           mesh1 = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000 ), material1 );
    scene.add( mesh1 );
    
animation();
</script>
</body>
</html>